<template>
	<view class="container">
		<!-- 基地图片展示 -->
		<image :src="`/img`+baseDetail.baseImg" alt="基地图片" class="base-image"></image>
		<view class="base-info">
			<text class="price">￥{{baseDetail.basePrice}}起
			</text>
			<view class="base-title">
				{{ baseDetail.baseName }}
				<view class="base-shareIcon">
					<up-icon name="share-fill" size="20px" color="rgb(98,205,175)"></up-icon>
					<text style="font-size: 15px;line-height: 30px;">分享</text>
				</view>
			</view>
			<view class="base-description">{{ baseDetail.baseDescription}}</view>
			<view class="base-location">重庆市市辖区渝南区</view>
		</view>
		<!-- 地块选择 -->
		<LandSelect></LandSelect>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	import {useBaseStore} from '@/stores/land.js'
	import LandSelect  from '@/component/Land/landSelect.vue'; // 导入组件
	

	//获取poinia存储的数据
	const baseStore = useBaseStore();
	onMounted(() => {
		baseDetail.value = baseStore.getBase();
	});
	//存储基地信息
	const baseDetail = ref({});

	// 方法：租赁地块
</script>

<style scoped>
	/* 页面整体容器样式 */
	.container {
		/* padding: 16px; */
		background-color: rgb(241,241,241);
	}
	.u-icon__icon[data-v-1c933a9a] {
	    font-family: uicon-iconfont;
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    /* width: 30px; */
	    margin-left: auto;
	}
	/* 基地图片样式 */
	.base-image {
		width: 100%;
		height: 200px;
		/* object-fit: cover; */
		/* 确保图片保持比例填充容器 */
	}

	/* 基地信息展示样式 */
	.base-info {
		padding: 8px;
		margin-top: 5px;
		background-color: white;
	}
	/**
	 * 风险样式
	 */
	.base-shareIcon{
		height: 100%;
		width: 50px;
		display: flex;
		margin-left: auto;
	}
	.price {
		font-size: 20px;
		color: red;
		font-weight: bold;
	}

	.base-title {
		font-size: 18px;
		margin-top: 8px;
		font-weight: bold;
		display: flex;
	}

	.base-description {
		margin-top: 4px;
	}

	.base-location {
		margin-top: 4px;
	}

	.land-status {
		display: flex;
		flex-wrap: wrap;
	}

	/* 地块块状元素样式 */
	.land-block {
		width: 30%;
		padding: 8px;
		margin: 8px;
		text-align: center;
		cursor: pointer;
		/* 鼠标悬停时变为手形，提示可以点击 */
		border-radius: 5px;
	}

	/* 可选地块样式 */
	.land-block.available {
		background: #e0ffe0;
	}

	/* 已选地块样式 */
	.land-block.selected {
		background: #ffe0b3;
	}

	/* 已租地块样式 */
	.land-block.rented {
		background: #ccc;
	}

	/* 底部租赁按钮样式 */
	.footer {
		margin-top: 16px;
	}

	.rent-button {
		width: 100%;
		background: #6bc493;
		color: #fff;
		padding: 12px;
		text-align: center;
		font-size: 18px;
		border: none;
		border-radius: 5px;
	}
</style>